<template>
  <div class="invit"> 
    
    <div class="back">
      <svg-icon iconClass="back" style="color:#fff" @click="$emit('changeFlg',false)"></svg-icon>
    </div>

    <div class="box">
      <div class="tx">
        <img src="../img/wel.png" alt="" />
      </div>

      <!-- <div class="close">
            <svg-icon iconClass="close" font-size="25px"></svg-icon>
        </div> -->

      <h3>预计邀请两个人,直接免费拿</h3>
      <div class="im">
        <!-- <van-uploader v-model="fileList" multiple :max-count="2" /> -->
        <!-- <van-uploader :after-read="afterRead" />
        <van-uploader :after-read="afterRead" /> -->
        <img src="../img/tj.png" alt="">
        <img src="../img/tj.png" alt="">
      </div>
      <div class="btn">
        <button @click="handleClick=true">去微信邀请好友帮忙砍价</button>
     
      </div>
    </div>
    <Dialog v-if="handleClick"></Dialog>
  </div>
</template>

<script>
import Dialog from "./copyDialog"
export default {
  data() {
    return {
      fileList: [],
      handleClick:false
    };
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    }
  },
 components:{
    Dialog
  }
};
</script>

<style lang="scss" scoped>
@import "../assets/css/style.scss";
body{
width: 100%;
height: 100%;
position: relative;
}
.copy{
  width:100%;
  height:100%;
   position: absolute;
   left:0;
   top:0;
} 
.invit {
  width: 100%;
  height: 100%;
    background: rgba($color:#000,$alpha:0.7);
  position: relative;
  display: flex;
  flex-direction: column;
  /* left: 0;
  top: 0; */
  .copy{
  width:100%;
  height:100%;
   position: absolute;
   left:0;
   top:0;
  
}
}
.back {
  width: 100%;
  padding:0 px2rem(15);
}
.box {
  width: 80%;
  height: 50%;
  background: #f4ebca;
  margin-left: 10%;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  position: relative;
  border-radius: px2rem(17);
  .tx {
    position: relative;
    width: px2rem(75);
    height: px2rem(75);
    transform: translateX(-50%);
    top: px2rem(-45);
    left: 50%;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  h3 {
    display: block;
    width: 100%;
    height: px2rem(50);
    font-size: px2rem(18);

    text-align: center;
    color: #702d16;
    font-weight: 600;
  }
  .btn {
    width: 100%;
    height: px2rem(50);
    button {
      width: 90%;
      height: px2rem(40);
      font-size: px2rem(18);
      border-radius: px2rem(25);
      background: #ed784d;
      color: #fff;
      border: 0;
      margin-left: 5%;
      margin-top: px2rem(30);
    }
  }
  .close {
    position: relative;
    top: px2rem(-45);
    left: 0;
  }
  .im {
    width: 100%;
    height: px2rem(100);
    text-align: center;
    margin-top: px2rem(30);
    img{
        width:30%;
        height:76%;
        margin-left:px2rem(20);
        margin-right:px2rem(10) ;
    }
  }
  .van-uploader__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;

    opacity: 0;
  }
}

// .box{
//     position: relative;
//     width:80%;
//     height:50%;
//     position: absolute;
//     margin-left:10%;
//     margin-top:45%;
//     transform: translateY(-50);
//     background: #F4EBCA;
//     border-radius: px2rem(17);

//     img{
//        position: relative;
//        width:px2rem(75);
//        height:px2rem(75);
//        top:px2rem(-45);
//        left:50%
//     }
//     h3{
//      font-size: px2rem(10);
//     }

// }
</style>

